<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#lunbo {
				width: 580px;
				height: 435px;
				margin: 50px auto;
				position: relative;
			}
			
			#lunbo .picture ul {
				list-style: none;
			}
			/*隐藏所有的的图片*/
			
			#lunbo .picture ul li {
				display: none;
			}
			
			#lunbo .picture ul li.cur {
				display: block;
			}
			/*黑框 */
			
			#lunbo .bg {
				position: absolute;
				background: url(img/heikuang.png);
				width: 100%;
				height: 40px;
				bottom: 0;
				left: 0;
			}
			
			#lunbo .bg h3 {
				float: left;
				color: white;
				width: 200px;
				height: 40px;
				line-height: 40px;
				padding-left: 5px;
			}
			
			#lunbo .bg ul {
				float: right;
				width: 250px;
				padding-top: 13px;
				list-style: none;
			}
			
			#lunbo .bg ul li {
				float: left;
				width: 14px;
				height: 14px;
				background: url(img/icons.png) no-repeat -25px -125px;
				margin-right: 10px;
			}
			
			#lunbo .bg ul li.xyd {
				background-position: -9px -125px;
			}
			
			#lunbo .btn .btnLeft {
				background: url(img/icons.png) no-repeat 0 0;
				display: block;
				width: 45px;
				height: 45px;
				position: absolute;
				top: 190px;
				left: 10px;
				cursor: pointer;
			}
			
			#lunbo .btn .btnRight {
				background: url(img/icons.png) no-repeat 0 -48px;
				display: block;
				width: 45px;
				height: 45px;
				position: absolute;
				top: 190px;
				right: 10px;
				/*光标(鼠标指针)的形状*/
				cursor: pointer;
				/*cursor:wait;*/
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
			//1.所有图片所在的li
				var myLi=document.getElementById("pic").getElementsByTagName("li");
			//2.小圆点li
				var myXydLi=document.getElementById("lunbo_yd").getElementsByTagName("li");
			//3.标题(h3)biaoti
				var myBiaoti=document.getElementById("biaoti");
			//4.左右两个按钮
				var myBtnLeft=document.getElementById("btnLeft");
				var myBtnRight=document.getElementById("btnRight");
			//5得到所有的 a标签 
				var mya=document.getElementById("pic").getElementsByTagName("a");
				
				//全局变量 ：图片li所在的位置（下标）[cur所在的位置],默认值就是第一个图片li所在的位置（下标） = 0
				var nowImg=0;
			
			//右按钮
				myBtnRight.onclick=function(){
//				1.改变全局变量的值
					//到达最后一张图时，再点击则返回第一张图
					if(nowImg<myLi.length-1){
						nowImg++;
					}else{
						nowImg=0; //回到第一张图片
					}
					console.log(nowImg);
//				2.修改页面
					changePic();  //调用换图的公共函数
					changeXyd();  //调用小圆点的公共函数
					changeBiaoti();//调用标题的公共函数
				}
			
			//左按钮
				myBtnLeft.onclick=function(){
//				1.改变全局变量的值
					//到达第一张图时，再点击则返回最后一张图
					if(nowImg>0){
						nowImg--;
					}else{
						nowImg=myLi.length-1; //回到最后一张图片
					}
					console.log(nowImg);
//				2.修改页面
					changePic();  //调用换图的公共函数
					changeXyd();  //调用小圆点的公共函数
					changeBiaoti();//调用标题的公共函数
				}
			
			//为小圆点写事件
				for(var i=0;i<=myXydLi.length-1;i++){
					myXydLi[i].index=i;  //先要记住自己的位置
					
					myXydLi[i].onmouseover=function(){
						nowImg=this.index;  //改变全局变量的值
						changePic();   //调用换图的公共函数
						changeXyd();   //调用小圆点的公共函数
						changeBiaoti();//调用标题的公共函数
					}
				}
				
			//封装一个换图的公共函数
				function changePic(){
				//2.修改页面
					//先所有的人都 不带cur
					for(var i=0;i<=myLi.length-1;i++){
						myLi[i].className="";
					}
					//让自己带cur
					myLi[nowImg].className="cur";
				}
			//封装小圆点的公共函数
				function changeXyd(){
					for(var i=0;i<=myXydLi.length-1;i++){
						myXydLi[i].className="";
					}
					myXydLi[nowImg].className="xyd";
				}
			//封装标题的公共函数
				function changeBiaoti(){
					myBiaoti.innerHTML=mya[nowImg].title;
				}
			}
		</script>
		<!--关于标题 思路:
			1、可以使用一个数组，按顺序把所有图片的描述保存下来。
			2、使用a标签 或img标签的title属性来携带对图片的描述 。-->
	</head>
	<body>
		<div id="lunbo">
			<!--图片-->
			<div class="picture">

				<ul id="pic">
					<!--轮播的原理 : 用js来控制 cur的位置 -->
					<li class="cur">
						<a href="#" title="0保时捷"> <img src="img/0保时捷.jpg"></a>
					</li>
					<li>
						<a href="#" title="1马自达"> <img src="img/1马自达.jpg"></a>
					</li>
					<li>
						<a href="#" title="2这是啥"> <img src="img/2这是啥.jpg"></a>
					</li>
					<li>
						<a href="#" title="3保时捷(2)"> <img src="img/3保时捷(2).jpg"></a>
					</li>
					<li>
						<a href="#" title="4克莱斯勒"> <img src="img/4克莱斯勒.jpg"></a>
					</li>

				</ul>
			</div>
			<!--黑框-->
			<div class="bg">
				<h3 id="biaoti">0保时捷 </h3>
				<ul id="lunbo_yd">
					<li class="xyd"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<!--两个按钮-->
			<div class="btn">
				<a id="btnLeft" class="btnLeft"></a>
				<a id="btnRight" class="btnRight"></a>

			</div>
		</div>
	</body>
</html>
